<!--
 * @Author: fisher luthor-li@qq.com
 * @Date: 2023-11-15 20:50:45
 * @LastEditors: fisher luthor-li@qq.com
 * @LastEditTime: 2024-03-11 11:07:22
 * @FilePath: \pixelStream\src\views\player\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="player">
    <!-- 页面内容 -->
  </div>
  <div class="operate">
    <div class="btn" @click="send2ue">发送消息</div>
  </div>
</template>

<script setup>
import {
  Config,
  PixelStreaming,
} from "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3";
import { onMounted, ref } from "vue";
import { AA } from "./index.js";
let stream = undefined;
const player = ref(null);
const myHandleResponseFunction = (response) => {
  console.log("response", response);
};
onMounted(() => {
  const config = new Config({
    initialSettings: {
      AutoPlayVideo: false,
      AutoConnect: true,
      ss: "ws://127.0.0.1:80",
      StartVideoMuted: true,
      WaitForStreamer: true,
    },
  });

  // Create a PixelStreaming instance and attach the video element to an existing parent div
  stream = new PixelStreaming(config, {
    videoElementParent: player.value,
  });
  // setTimeout(() => {
  stream.addResponseEventListener("handle_responses", myHandleResponseFunction);
  // }, 3000);
});
const send2ue = () => {
  console.log("stream== ", stream);
  console.log("stream.emitUIInteraction== ", stream.emitUIInteraction);
  const res = stream.emitUIInteraction("test");
  console.log("res== ", res);
};

const temp = new AA()
temp.testA()
</script>

<style>
.operate {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}
.btn {
  width: 80px;
  height: 36px;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}
</style>
